<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的主页</title>
		<link rel="stylesheet" href="MyHome.css">
		<script src="MyHome.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 头部导航条部分 -->
		<div>
			<section class="navigation">
			    <div class="nav-container">
					<div class="brand">
						<a href="#!">动漫放映室</a>
					</div>
					<nav>
					    <div class="nav-mobile">
						    <a id="nav-toggle" href="#!"><span></span></a>
					    </div>
						<ul class="nav-list">
							<li><a href="Home.html">主页Home</a></li>
							<li><a href="ScreeningRoom.html">放映室</a></li>
							<li><a href="#!">动漫类型</a>
								<ul class="nav-dropdown">
									<li><a href="#!">动漫1</a></li>
									<li><a href="#!">动漫2</a></li>
									<li><a href="#!">动漫3</a></li>
								</ul>
							</li>
							<li><a href="MyHome.html">我的主页</a></li>
							<li><a href="#!">联系方式</a></li>
						</ul>
					</nav>
			    </div>
			</section>
		</div>
		
		<div class="zhuye">
			<header class="header">
				<h1 class="header-logo">我的主页</h1>
				<div class="header-content">
					<div class="header-search">
						<input type="text" class="search-field" placeholder="搜索" />
						<button type="submit" class="search-btn">
							<i>🔍</i>
						</button>
					</div>
					<button class="header-avatar">
						<span class="header-avatar-img"></span>
						<span class="header-avatar-name">我的ID</span>
					</button>
				</div>
			</header>
			<main class="main">
				<nav class="nav">
					<ul class="tabs">
						<li class="tab">
							<button class="tab-btn tab-btn--active">
								<i class="1"></i>
								<a href="#!">
									<span class="tab-btn-title">历史记录</span>
								</a>
							</button>
						</li>
						<li class="tab">
							<button class="tab-btn">
								<i class="2"></i>
								<a href="Favorite.html">
									<span class="tab-btn-title">我的收藏</span>
								</a>
							</button>
						</li>
						<li class="tab">
							<button class="tab-btn">
								<i class="3"></i>
								<a href="#!">
									<span class="tab-btn-title">我的动态</span>
								</a>
							</button>
						</li>
						<li class="tab">
							<button class="tab-btn">
								<i class="4"></i>
								<a href="#!">
									<span class="tab-btn-title">关注列表</span>
								</a>
							</button>
						</li>
						<li class="tab">
							<button class="tab-btn">
								<i class="5"></i>
								<a href="#!">
									<span class="tab-btn-title">更多设置</span>
								</a>
							</button>
						</li>
					</ul>
				</nav>
				<div class="content">
					<div class="content-header">
						<div class="content-header-inner">
							<h1 class="content-header-title">欢迎回到主页， <br />你喜欢的    <small>视频</small></h1>
							<div class="content-header-info">
								我的视频列表<a href="#" class="link">现在修改</a>
							</div>
						</div>
						<div class="content-header-illustration">
							<img src="img/vidicon.png" />
						</div>
					</div>
					<div class="content-body">
						<section class="overview">
							<header class="overview-header">
								<h2 class="overview-header-title">我的收藏夹<span>star</span></h2>
								<a href="#" class="link">查看所有</a>
							</header>
							<div class="overview-body">
								<div class="summary">
									<h3 class="summary-date">2021年12月26日</h3>
									<span class="summary-amount">8个收藏</span>
								</div>
								<div class="list">
									<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo">
												<img src="img/w5.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">疯狂动物城</h4>
												<a href="#" class="list-item-video-hashtag">#迪士尼</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value">
													<i class="ph-arrows-clockwise-bold">已播放23分钟</i>
												</span>
												<time class="list-item-record-time" datetime="17:00">5:00pm</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
									<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo">
												<img src="img/w17.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">你的名字</h4>
												<a href="#" class="list-item-video-hashtag">#新海诚</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value list-item-record-value--positive">
													<i class="ph-arrows-clockwise-bold">已播放50分钟</i>
												</span>
												<time class="list-item-record-time" datetime="11:30">11:30am</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
									<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo">
												<img src="img/w22.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">哆啦A梦</h4>
												<a href="#" class="list-item-video-hashtag">#日本漫画</a>
												<a href="#" class="list-item-video-hashtag">#喜剧</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value">
													<i class="ph-arrows-clockwise-bold">已播放50分钟</i>
												</span>
												<time class="list-item-record-time" datetime="11:23">11:23am</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
										<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo">
												<img src="img/w20.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">天空之城</h4>
												<a href="#" class="list-item-video-hashtag">#吉卜力工作室</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value">
													<i class="ph-arrows-clockwise-bold">已播放50分钟</i>
												</span>
												<time class="list-item-record-time" datetime="10:00">10:00am</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
								</div>
								<div class="summary">
									<h3 class="summary-date">2021年10月5日</h3>
									<span class="summary-amount">5个收藏</span>
								</div>
								<div class="list">
									<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo">
												<img src="img/w26.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">国王排名</h4>
												<a href="#" class="list-item-video-hashtag">#漫画改编</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value list-item-record-value--positive">
													 <i class="ph-arrows-clockwise-bold">已播放50分钟</i>
												</span>
												<time class="list-item-record-time" datetime="17:00">5:00pm</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
									<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo">
												<img src="img/w27.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">名侦探柯南</h4>
												<a href="#" class="list-item-video-hashtag">#日本漫画</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value">
													<i class="ph-arrows-clockwise-bold">已播放50分钟</i>
												</span>
												<time class="list-item-record-time" datetime="16:40">4:40pm</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
									<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo">
												<img src="img/w28.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">精灵宝可梦</h4>
												<a href="#" class="list-item-video-hashtag">#日本漫画</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value">
													<i class="ph-arrows-clockwise-bold">已播放50分钟</i>
												</span>
												<time class="list-item-record-time" datetime="13:23">1:23pm</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
								</div>
							</div>
							<footer class="overview-footer">
								<a href="#" class="link">查看所有<i class="ph-arrow-right-bold"></i></a>
							</footer>
						</section>
						<section class="overview">
							<header class="overview-header">
								<h2 class="overview-header-title">我的关注<span>follow</span></h2>
								<a href="#" class="link">查看所有</a>
							</header>
							<div class="overview-body">
								<div class="list">
									<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo list-item-video-logo--square">
												<img src="img/w23.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">哔哩哔哩</h4>
												<a href="#" class="list-item-video-hashtag">#bilibili</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value">
													<i class="ph-arrows-clockwise-bold">已播放50分钟</i>
												</span>
												<time class="list-item-record-time" datetime="16:00">4:00pm</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
									<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo list-item-video-logo--square">
												<img src="img/w24.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">AcFun</h4>
												<a href="#" class="list-item-video-hashtag">#a站</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value">
													<i class="ph-arrows-clockwise-bold">已播放50分钟</i>
												</span>
												<time class="list-item-record-time" datetime="16:00">4:00pm</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
									<div class="list-item">
										<div class="list-item-video">
											<figure class="list-item-video-logo list-item-video-logo--square">
												<img src="img/w25.jpg" />
											</figure>
											<div class="list-item-video-info">
												<h4 class="list-item-video-name">腾讯动漫</h4>
												<a href="#" class="list-item-video-hashtag">#腾讯</a>
											</div>
										</div>
										<div class="list-item-record">
											<div class="list-item-record-values">
												<span class="list-item-record-value">
													<i class="ph-arrows-clockwise-bold">已播放50分钟</i>
												</span>
												<time class="list-item-record-time" datetime="16:00">4:00pm</time>
											</div>
											<button class="list-item-record-action">
												<i class="ph-caret-down-bold"></i>
											</button>
										</div>
									</div>
								</div>
							</div>
							<footer class="overview-footer">
								<a href="#" class="link">查看所有<i class="ph-arrow-right-bold"></i></a>
							</footer>
						</section>
					</div>
				</div>
			</main>
		</div>
	</body>
</html>
